<template>
  <van-row flex style="margin-top: 2%">
    <van-col span="8">
      <van-image round :src="item.headPic" id="msgHeadPic" v-if="item.online"/>
      <van-image round :src="item.headPic" id="msgHeadPicNotLine" v-else/>
    </van-col>
    <van-col span="16">
      <div id="other-nickname">
        <p>{{ item.nickname }}</p>
      </div>
      <div class="other-chat-content">
        <p>{{ item.content }}</p>
      </div>
    </van-col>
  </van-row>
</template>

<script setup>
const props = defineProps({
  item: {
    type: Object,
    default: () => ({
      content: '默认值',
      headPic: '',
      id: '',
      nickname: '',
    }),
  },
})

</script>

<style scoped>
#msgHeadPic {
  width: 80%;
  margin-top: 5%;
}

#other-nickname {
  margin-top: 5%;
}

#msgHeadPicNotLine {
  width: 80%;
  margin-left: 5%;
  margin-top: 5%;
  -webkit-filter: grayscale(100%);
}


.other-chat-content {
  margin-top: 1%;
}
</style>
